<template>
  <div class="relative">
    <div class="environment-header">
      <p class="title left">视频监控</p>
      <div class="head-right">
        <a v-if="!searchByPro && browseScreen" :href="$site.videoServer+'/#/video/screen/area?departmentId=&name=集团总部&auto=true'" class="button-block">查看大屏轮播</a>
        <a v-if="searchByPro && browseScreen && !chooseArea" :href="$site.videoServer+'/#/video/screen/area?departmentId=&name=集团总部&auto=true'" class="button-block">查看大屏轮播</a>
        <a v-if="searchByPro && browseScreen && chooseArea" :href="$site.videoServer+'/#/video/screen/area?departmentId='+ departmentId +'&name='+ areaList[chooseArea]+'auto=true'" class="button-block">查看大屏轮播</a>
        <span class="mr10 ml20">视图</span>
      <zz-select
        class="inline mr10"
        style="width: 152px"
        :border= true
        :options="{width: '100%'}"
        :option="themeList"
        :all = false
        optionColor = "#939997"
        :name = shituName
        @optionClick="changeView">
      </zz-select>
      <span class="mr10" v-if="searchByPro">区域</span>
      <zz-select v-if="searchByPro"
        class="inline mr10"
        style="width: 152px"
        :border= true
        :options="{width: '100%'}"
        :option="areaList"
        :all = false
        optionColor = "#939997"
        name = "全部区域"
        @optionClick="changeArea">
      </zz-select>
      <span class="mr10" v-if="searchByPro">项目</span>
      <span class="mr10" v-else>区域</span>
      <zz-search
        class="inline mr10"
        :width="155"
        :searchTop="4"
        @searchClick="searchClick">
      </zz-search>
      </div>
    </div>
    <div class="top-right right">
      <span class="mr10" v-if="!searchByPro">筛选</span>
      <zz-select v-if="!searchByPro"
        class="inline mr10"
        style="width: 217px"
        :border= true
        :options="{width: '100%'}"
        :option="changeOptionList"
        :all = false
        optionColor = "#939997"
        name = "全部区域"
        @optionClick="selectArea">
      </zz-select>
      <span class="mr10" v-if="!searchByPro">排序</span>
      <zz-select v-if="!searchByPro"
        class="inline mr10"
        style="width: 152px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList1"
        :all = false
        optionColor = "#939997"
        name = "接入视频监控项目数"
        @optionClick="sortBy">
      </zz-select>
      <zz-select v-if="!searchByPro"
        class="inline"
        style="width: 99px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList2"
        :all = false
        optionColor = "#939997"
        name = "升序"
        @optionClick="changeSortFun">
      </zz-select>
      <zz-check v-if="searchByPro"
        :check = false
        class="grid"
        fontSize="12px"
        @handleChange="handleChange"
        style="vertical-align: text-top;"
        checkTip="只查看有智能抓拍的项目">
      </zz-check>
      <zz-select v-if="searchByPro"
        class="inline"
        style="width: 162px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList3"
        :all = false
        optionColor = "#939997"
        name = "按摄像头数量升序"
        @optionClick="changeSortByAiFun">
      </zz-select>
    </div>
    <div class="info mr20" v-if="searchByPro">
      <div>接入视频监控项目<span>{{videoCount.hasAi}}</span>个</div>
      <div>未接入的项目<span>{{videoCount.noAi}}</span>个</div>
      <button @click="notAiList" class="button-line">查看详情</button>
    </div>
    <!-- <zz-table
      style="margin: 10px auto 0; width: 100%;"
      :title="title"
      :dataList = 'dataList'
      @handle="tableHandler">
    </zz-table> -->
    <div class="mainsec">
      <table v-if="!searchByPro" class="main-table">
        <tr>
          <th>区域名称</th>
          <th>智慧工地数量</th>
          <th>接入视频监控项目数量</th>
          <th>有智能监控的项目数量</th>
          <th>摄像头数量</th>
          <th>预警抓拍记录</th>
          <th>报警抓拍记录</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in dataList" v-if="dataList && dataList.length > 0">
          <td>{{item.departmentName}}</td>
          <td class="alignRight">{{item.projectNum && item.projectNum != 0 ? item.projectNum : '--' }}</td>
          <td class="alignRight">{{item.projectHaveVideoNum && item.projectHaveVideoNum != 0 ? item.projectHaveVideoNum : '--'}}</td>
          <td class="alignRight">{{item.projectHaveAiNum && item.projectHaveAiNum != 0 ? item.projectHaveAiNum : '--' }}</td>
          <td class="alignRight">{{item.videoNum && item.videoNum != 0 ? item.videoNum : '--' }}</td>
          <td class="alignRight">{{item.earlyAlarmNum && item.earlyAlarmNum != 0 ? item.earlyAlarmNum : '--' }}</td>
          <td class="alignRight">{{item.alarmNum && item.alarmNum != 0 ? item.alarmNum : '--' }}</td>
          <td @click="tableHandler(item)" class="detail pointer">查看详情</td>
        </tr>
        <tr class="nodate" v-if="!dataList || dataList.length === 0">
          <td colspan="8"><i class="iconfont icon-warning"></i>暂无数据</td>
        </tr>
      </table>
      <table v-if="searchByPro" class="main-table">
        <tr>
          <th>区域名称</th>
          <th>项目名称</th>
          <th>摄像头数量</th>
          <th>预警抓拍记录</th>
          <th>报警抓拍记录</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in dataList" v-if="dataList && dataList.length > 0">
          <td>{{item.areaName}}</td>
          <td>{{item.projectName}}
            <i class="iconfont icon-jiankong right" v-if="item.isProjectHaveAi"></i>
          </td>
          <td class="alignRight">{{item.videoNum && item.videoNum != 0 ? item.videoNum : '--' }}</td>
          <td class="alignRight">{{item.earlyAlarmNum && item.earlyAlarmNum != 0 ? item.earlyAlarmNum : '--' }}</td>
          <td class="alignRight">{{item.alarmNum && item.alarmNum != 0 ? item.alarmNum : '--' }}</td>
          <td @click="tableHandler(item)" class="detail pointer">查看详情</td>
        </tr>
        <tr class="nodate" v-if="!dataList || dataList.length === 0">
          <td colspan="8"><i class="iconfont icon-warning"></i>暂无数据</td>
        </tr>
      </table>
    </div>
    <zz-paginate pagingId="page1"  v-if="dataList.length > 0" @choose="query" :padding="[0]" :simple="false" :isTotalItem="false" :pageSize = pageNum  class="right mr20"></zz-paginate>
    <div class="exportExcel">
      <button class="mr10 button-block ml20" @click="exportExcel()">导出Excel</button>
      <div>上述每小时统计一次，本次数据更新时间：<span v-if="updateTime">{{$moment(updateTime).format('HH:mm:ss')}}</span></div>
    </div>

    <!-- 未接入视频监控的项目弹窗 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
        <div style="width: 800px; height: 520px; overflow: hidden">
          <zz-table
            style="margin: 0 -20px 0"
            :title="dialogTableTitle"
            :dataList = "detailDataList">
          </zz-table>
          <zz-paginate pagingId="page2" v-if="detailDataList.length > 0" :simple="false" :isTotalItem="false" @choose="detailQuery" pageSize = 10 :padding="[0]" class="right"></zz-paginate>
          <div class="exportExcel">
            <button class="mr10 button-block" @click="exportNoMonitorExcel()">导出Excel</button>
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getEntryVideoListByRegion, getEntryVideoListByProject, getNoAccessProjectCount, getNoAccessProjectList, getDepartmentList } from '../../../service/api.js'

export default {
    name: 'videomonitor',
    components: {
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        shituName: '',
        themeList: {
          1: '按区域/城市公司',
          2: '按项目'
        },
        sortList1: {
          1: '接入视频监控项目数',
          2: '智能监控项目数',
          3: '摄像头数量',
          4: '预警抓拍数量',
          5: '报警抓拍数量'
        },
        sortList2: {
          1: '升序',
          2: '降序'
        },
        sortList3: {
          1: '按摄像头数量升序',
          2: '按摄像头数量降序'
        },
        areaList: {
          1: '全部区域',
        },
        changeOptionList: {
          1: '全部区域',
          2: '只显示有智能监控的区域'
        },
        dataList: [],
        title: [],
        searchByPro: false,
        showDialog: false,
        dialogTitle: '未接入视频监控的项目',
        dialogTableTitle: [
          {name: '序号', width: '11%', align: 'left'},
          {name: '项目名称', width: '20%', align: 'left'},
          {name: '区域', width: '15%', align: 'left'},
          {name: '项目负责人', width: '22%', align: 'left'},
          {name: '上线智慧工地时间', width: '22%', align: 'left'}
        ],
        detailDataList: [
        ],
        filterWord: '',
        // 按区域、城市公司查找参数
        filterArea: 1,
        companySort1: 1,
        companySort2: 1,
        // 按项目查找参数
        chooseArea: '',
        dataAccessRangeCode: '',
        checkStatus: false,
        projectSort: 1,
        page: 1,
        pageNum: 10,
        noAccessPage: 1,
        videoCount: {
          accessCount: 0,
          noAccessCount: 0
        },
        defaultNum: 1,
        updateTime: '', //上传时间
        departmentId: '' ,// 区域ID，跳转大屏用的
        departmentIdList: [],
        browseScreen: true //大屏权限
      }
    },
    mounted () {
      this.getAuth()
      this.findUserDataAccessRange().then(() => {
        this.setDataOption()
      })
    },
    methods: {
      findUserDataAccessRange () {
        return new Promise(resolve => {
          let data = {
            'dataAccessRange.fun_code': 'c_VideoMonitor_browse',
            'dataAccessRange.company_id': this.currentUser.coId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.companyServer}/front/findUserDataAccessRange.htm`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            this.dataAccessRangeCode = res.data.dataAccessRange.code
            resolve()
          })
        })
      },
      setDataOption () {
        if (this.dataAccessRangeCode === 5 || this.dataAccessRangeCode === 4) {
          this.shituName = '按区域/城市公司'
          this.themeList = {
            1: '按区域/城市公司',
            2: '按项目'
          }
          this.changeView({key: "1"})
        } else {
          this.shituName = '按项目'
          this.themeList = {
            2: '按项目'
          }
          this.changeView({key: "2"})
        }
      },
      getAuth () {
        let menus = this.$local.get('childMenus')
        if (menus) {
          // 是否拥有大屏查看权限
          this.browseScreen = menus.some((item) => item.funCode === 'c_VideoMonitor_screen_rotation')
          //this.browseScreen = true
        }
      },
      gopage (url, idnum, pname) {
        this.$router.push({ path: url, query: { id: idnum, name: pname }})
      },
      changeView (item) {
        this.searchByPro = (item.key === "1" ? false : true)
        this.filterWord = ''
        this.updateTime = ''
        if (item.key === "1") {
          // 按区域、城市公司
          this.title = [
            {name: '区域名称', width: '20%', align: 'left'},
            {name: '智慧工地数量', width: '16%', align: 'left'},
            {name: '接入视频监控项目数量', width: '16%', align: 'left'},
            {name: '有智能监控的项目数量', width: '16%', align: 'left'},
            {name: '摄像头数量', width: '16%', align: 'left'},
            {name: '预警抓拍记录', width: '16%', align: 'left'},
            {name: '操作', width: '10%', align: 'left'}
          ]
        } else {
          // 按项目
          this.title = [
            {name: '区域名称', width: '25%', align: 'left'},
            {name: '项目名称', width: '25%', align: 'left'},
            {name: '摄像头数量', width: '15%', align: 'left'},
            {name: '预警抓拍记录', width: '10%', align: 'left'},
            {name: '报警抓拍记录', width: '10%', align: 'left'},
            {name: '操作', width: '15%', align: 'left'}
          ]
          this.getAreaList()
          this.getNoAccesspList()
        }
        this.getVideoList(item.key)
      },
      getAreaList () {
        // 获取按项目查询时候区域列表
        getDepartmentList().then( res => {
          this.departmentIdList = []
          for (let item of res.data) {
            // this.areaList[item.departmentId] = item.departmentName
            this.areaList[item.areaCode] = item.departmentName
            this.departmentIdList.push({id:item.departmentId, name: item.departmentName})
          }
        }).catch( err => {
          console.log(err)
        })
      },
      getNoAccesspList() {
        // 按项目查找时获取未接入视频监控项目数据
        getNoAccessProjectCount({
          departmentId: this.chooseArea,
          areaCode: this.chooseArea
        }).then( res => {
          this.videoCount = {
            hasAi: res.data.accessCount,
            noAi: res.data.noAccessCount
          }
        }).catch( err => {
          console.log(err)
        })
      },
      changeArea (item) {
        if (item.key === '1') {
          item.key = ''
          this.chooseArea = item.key
          this.departmentId = ''
        } else {
          this.chooseArea = item.key
          for (let i = 0 ;i < this.departmentIdList.length; i++) {
            if (this.departmentIdList[i].name === item.value) {
              this.departmentId = this.departmentIdList[i].id
            }
          }
        }
        this.searchByProject()
        this.getNoAccesspList()
        // 修改区域
      },
      selectArea (item) {
        this.filterArea = Number(item.key)
        this.searchByCompany()
        // 筛选
      },
      sortBy (item) {
        this.companySort1 = Number(item.key)
        this.searchByCompany()
        // 修改排序方式
      },
      changeSortFun (item) {
        this.companySort2 = Number(item.key)
        this.searchByCompany()
        // 升降序修改
      },
      // 是否只查看有智能抓拍的项目
      handleChange (item) {
        this.checkStatus = item
        this.searchByProject()
      },
      changeSortByAiFun (item) {
        this.projectSort = Number(item.key)
        this.searchByProject()
        // 按摄像头升降序排列查询
      },
      searchClick (item) {
        // 搜索项目
        this.filterWord = item
        if (this.searchByPro) {
          this.searchByProject()
        } else {
          this.searchByCompany()
        }
      },
      query (item) {
        // 获取对应页数据
        this.page = item
        if (this.searchByPro) {
          this.searchByProject()
        } else {
          this.searchByCompany()
        }
      },
      detailQuery (item) {
        // 未接入视频项目弹层的获取对应页数据
        this.noAccessPage = item
        this.getNoAccessDetailList()
      },
      // 获取企业级的视频监测数据
      getVideoList (type) {
        if (type === '1') {
          // 按区域城市查询
          this.searchByCompany()
        } else {
          // 按项目查询
          this.searchByProject()
        }
      },
      // 查看详情
      tableHandler (data) {
        if (this.searchByPro) {
          this.gopage('/videoMonitor/projectVideo', data.projectId, data.projectName)
        } else {
          this.gopage('/videoMonitor/areaVideo', data.areaCode, data.departmentName)
        }
      },
      searchByCompany () {
        this.dataList = []
        let data = {
          'departmentName': this.filterWord,
          'filter': this.filterArea,
          'sortField': this.companySort1,
          'sortMode': this.companySort2,
          // 'page': this.page,
          'pageNum': this.pageNum
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByRegion`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page1',
          }).then(res => {
            if (res.data.data && res.data.data.dataList) {
              this.dataList = res.data.data.dataList
              if (res.data.data.dataList.length > 0) {
                this.updateTime = res.data.data.dataList[0].updateTime
              }
            } else {
              this.dataList = []
              this.updateTime = ''
            }
          })
      // 按区域城市查询
      },
      searchByProject () {
        this.dataList = []
        let data = {
          // 'departmentId': this.chooseArea,
          'areaCode': this.chooseArea,
          'projectName': this.filterWord,
          'isAi': this.checkStatus,
          'sort': this.projectSort,
          // 'page': this.page,
          'pageNum': this.pageNum
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByProject`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page1',
          }).then(res => {
            if (res.data.data && res.data.data.dataList) {
              this.dataList = res.data.data.dataList
              if (res.data.data.dataList.length > 0) {
                this.updateTime = res.data.data.dataList[0].updateTime
              }
            } else {
              this.dataList = []
              this.updateTime = ''
            }
          })
      // 按项目查询
      },
      // 查看未接入视屏监控项目列表
      notAiList() {
        this.showDialog = true
        this.getNoAccessDetailList()
      },
      // 获取未接入视屏监控项目的列表
      getNoAccessDetailList () {
        let data = {
          // 'departmentId': this.chooseArea,
          'areaCode':this.chooseArea,
          'projectName': this.filterWord,
          'isAi': this.checkStatus,
          'sort': this.projectSort,
          // 'page': this.noAccessPage,
          // 'pageNum': this.pageNum
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/enterpriseWebVideoController/getNoAccessProjectList`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page2',
          }).then(res => {
           //console.log(res)
           if (res.data.data && res.data.data.dataList) {
              this.noAccessPage = res.data.data.pageNum
              this.defaultNum = 1
              let now = (new Date()).getTime()
              this.detailDataList = res.data.data.dataList
              this.detailDataList = this.detailDataList.map(item => {
                return {
                  defaultNum: (this.noAccessPage - 1) * 10 + this.defaultNum++,
                  projectTitle: item.projectTitle || '--',
                  departmentName: item.departmentName || '--',
                  memberName: item.memberName || '--',
                  gmtCreate: {customize: `<span class='left'>${this.$moment(item.longGmtCreate).format('YYYY-MM-DD')}</span><span class='right'>已${Math.floor((now-item.longGmtCreate)/(1000*60*60*24))}天</span>`} //(this.$moment(item.longGmtCreate).format('YYYY-MM-DD') + " 已"+ Math.floor((now-item.longGmtCreate)/(1000*60*60*24)) +"天") || '--'
                }
            })
           } else {
             this.detailDataList = []
           }
          })
      },
      getInfoByAreaQuery () {
        return {
          departmentName: this.filterWord,
          filter: this.filterArea,
          sortField: this.companySort1,
          sortMode: this.companySort2
          // pageNum: this.pageNum
        }
      },
      getInfoByProjectQuery () {
        return {
          // departmentId: this.chooseArea,
          areaCode: this.chooseArea,
          projectName: this.filterWord,
          isAi: this.checkStatus,
          sort: this.projectSort
          // pageNum: this.pageNum
        }
      },
      getNoMonitorListQuery () {
        return {
          // departmentId: this.chooseArea,
          areaCode: this.chooseArea,
          projectName: this.filterWord,
          isAi: this.checkStatus,
          sort: this.projectSort
          // pageNum: this.pageNum
        }
      },
      exportExcel () {
        if (this.searchByPro) {
          this.$export(`${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByProjectAsExcel`, this.getInfoByProjectQuery())
        } else {
          this.$export(`${this.$site.videoServer}/api/enterpriseWebVideoController/getEntryVideoListByRegionAsExcel`, this.getInfoByAreaQuery())
        }
      },
      exportNoMonitorExcel () {
        this.$export(`${this.$site.videoServer}/api/enterpriseWebVideoController/getNoAccessProjectListAsExcel`, this.getNoMonitorListQuery())
      },
      close () {
        this.showDialog = false
        this.defaultNum = 1
      }
    }
}
</script>
<style lang="scss" scoped>
  .environment-header{
    height: 60px;
    line-height: 30px;
    padding: 15px 20px 17px 20px;
    box-sizing: border-box;
    border-bottom: 1px $color-line solid;
    position: relative;
    .head-right {
      position: absolute;
      right: 20px;
      z-index: 6;
    }
  }
  .top-right {
    padding: 20px 20px 10px 20px;
    height: 30px;
    line-height: 30px;
    z-index: 6;
    span {
      line-height: 30px;
    }
  }
  .mainsec {
    //width: 100%;
    padding: 0 20px;
  }
  .main-table {
    border: 1px #e2eaee solid;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    tr {
        height: 40px;
        text-align:left;
      }
      tr:nth-child(odd) {
        background: #fcfcfc;
      }
      tr:nth-child(even) {
        background: #fff;
      }
      th {
        text-align: left;
        background: #eef1f1;
        color:#363c3c;
        font-size: 14px;
        border: 1px solid #e5e6e8;
        font-weight: 400;
        padding-left: 20px;
      }
      td {
        font-size: 14px;
        border: 1px #e2eaee solid;
        border-bottom: none;
        border-top: none;
        padding:0 20px;
        text-align: left;
        i {
          color: $color;
        }
      }
      .detail {
        color: $color;
      }
      .nodate {
        td {
          text-align: center;
          i {
            color: $color;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
      }
      .alignRight {
        text-align: right;
      }
  }
  .info {
    padding: 20px 20px 0 20px;
    height: 30px;
    line-height: 30px;
    >div {
      font-size: 14px;
      color: #363c3c;
      display: inline-block;
      span {
        color: $color;
        font-weight: bold;
        display: inline-block;
        padding: 0 10px;
      }
    }
    >div:last-child {
      span {
        padding: 0 0 0 10px;
      }
    }
  }
  .exportExcel {
    div {
      line-height: 30px;
      display: inline-block;
      color: #939997;
    }
  }
</style>

